
// 【移出插槽】【左移】动画
@keyframes outLeftx1 {
    0% {}
    100% {
        transform: translateX(-100%);
    }
}

// 【移出插槽】【右移】动画
@keyframes outRightx1 {
    0% {}
    100% {
        transform: translateX(100%);
    }
}

// 【移出插槽】【上移】动画
@keyframes outTopx1 {
    0% {}
    100% {
        transform: translateY(100%);
    }
}

// 【移出插槽】【下移】动画
@keyframes outBottomtx1 {
    0% {}
    100% {
        transform: translateY(-100%);
    }
}

@keyframes inLeftx1 {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0); 
    }
}

// 【移入插槽】 【右移】动画
@keyframes inRightx1 {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0); 
    }
}

// 【移入插槽】 【上移】动画
@keyframes inTopx1 {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0); 
    }
}

// 【移入插槽】 【下移】动画
@keyframes inBottomx1 {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0); 
    }
}

// ------------------------------------------------------------------

.carousel_main {
    width: var(--width);
    height: var(--height);
    position: relative;

    .slide_wraper {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;

        // 插槽容器
        .slot_wraper {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;

            // 左【移出插槽】
            &.out_left {
                // animation: outLeftx1 var(--timer) ease-out;
                animation: outLeftx1 var(--timer) var(--animationType);
            }
            // 右【移出插槽】
            &.out_right {
                animation: outRightx1 var(--timer) var(--animationType);
            }

            // 上【移出插槽】
            &.out_top {
                animation: outTopx1 var(--timer) var(--animationType);
            }

            // 下【移出插槽】
            &.out_bottom {
                animation: outBottomtx1 var(--timer) var(--animationType);
            }

            
            // 左【移入插槽】
            &.in_left {
                animation: inLeftx1 var(--timer) var(--animationType);
            }

            // 右【移入插槽】
            &.in_right {
                animation: inRightx1 var(--timer) var(--animationType);
            }

            // 上【移入插槽】
            &.in_top {
                animation: inTopx1 var(--timer) var(--animationType);
            }

            // 下【移入插槽】
            &.in_bottom {
                animation: inBottomx1 var(--timer) var(--animationType);
            }
        }

        .moveNone {
            animation: none!important;
        }

        // 底部切换按钮样式
        .slide_pages {
            position: absolute;

            // 横向分页
            &.transverse {
                width: 100%;
                height: 14px;
                display: flex;
                align-items: center;
                justify-content: center;
                bottom: 20px;
                left: 0;
            }

            // 竖向分页
            &.vertical {
                width: 14px;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                top: 0;
                right: 10px;
            }

        .slide_li_x {
            display: inline-block;
            padding: 0 10px;
            cursor: pointer;
            color: #fff;
            font-size: 16px;

            .slide_point_x {
                // 分页按钮未激活样式
                display: inline-block;
                box-sizing: border-box;
                width: 14px;
                height: 14px;
                background: #a1e8e8;
                border-radius: 2px;

                // 分页按钮激活样式
                &.active {
                    background: #079eac;
                    border-radius: 2px;
                }
            }
        }
    }
    }

    // 两侧切换按钮样式
    .slide {

    // 左侧样式
    &_prev {
        width: 30px;
        height: 40px;
        position: absolute;
        top: 45%;
        left: -50px;
        text-align: center;
        line-height: 40px;
        color: #000;
        font-size: 27px;
        cursor: pointer;
    }

    // 右侧样式
    &_next {
        width: 30px;
        height: 40px;
        position: absolute;
        top: 45%;
        right: -50px;
        text-align: center;
        line-height: 40px;
        color: #000;
        font-size: 27px;
        cursor: pointer;
    }
    }
}